/*
 * @Author: luoqi
 * @Date: 2022-03-31 14:21:04
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-11 20:24:27
 * @Description: 
 */
import React, { useState, useForm ,useEffect} from 'react';
import { Form, Input, Button, Modal, Select, Statistic, Row, Col, ConfigProvider,message } from 'antd';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import zhCN from "antd/es/locale/zh_CN";
import axios from '../../util/axios'
import CommonButton from '../../components/HOC/HocButton/CommonButton';
import Addtabel from './AddTabel';

const { Option } = Select;

const Checkid = (props) => {
  //表单
  const [form] = Form.useForm();
  //模态框
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [showTable, setShowTable] = useState(false);
  //金额
  const [number, setNumber] = useState({ value: 11, });

  

  //获取用户余额
  useEffect(()=>{
    axios({
      url: '/ziJinMingXi/selectShangHuYuE',
      method: 'get',
      params:{name:JSON.parse(localStorage.getItem('user')).uName},
    }).then(res => {
      console.log(res);
      if (res.code === 200) {
        setNumber(res.data)
      }
    })
  },[])
  //模态框
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    form.submit()
    setIsModalVisible(false);
    setShowTable(false)
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    setShowTable(false)
  };

  //确认提交
  function onFinish(value) {
    console.log('提交代付：', value)
    axios({
      url: '/ziJinMingXi/yanZhengMiMa',
      method: 'get',
      params:{
        password:value.password,
        name:value.name
      }
      
    }).then(res => {
      console.log(res);
      if (res.code === 200) {
        setShowTable(true)
        message.success('验证成功');
      }else{
        message.error('验证失败：'+res.msg);
      }
    }).catch(res=>{
      message.error('请求错误'+res.msg);
    })
    
  }
  return (
    <div>
      <CommonButton buttonName="新增" type="primary" className="yellow" handlerClick={showModal} icon={<PlusOutlined />}
      />
      <ConfigProvider locale={zhCN}>
        <Modal title="新增代付订单" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} mask={false} width={800} footer={null}>

  
          <br />
          {!showTable ? <Form
            form={form}
            name="basic"
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 16 }}
            onFinish={onFinish}
            initialValues={{name:JSON.parse(localStorage.getItem('user')).uName,}}
          >
            <Form.Item
              label="商户名"
              name="name"
            >
              <Input readOnly/>
            </Form.Item>

            <Form.Item
              label="登录密码"
              name="password"
            >
              <Input.Password />
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 8 }}>
              <Button type="primary" htmlType="submit" style={{ width: 150 }}>
                确认
              </Button>
            </Form.Item>
          </Form> : (
            <>
              <Row>
                <Col span={4} offset={10}>
                  <Statistic title="账户余额（元）" valueStyle={{ color: '#3f8600' }} value={number} />
                </Col>
              </Row>
              <Addtabel setIsModalVisible={setIsModalVisible} isAll={props.isAll}/>
            </>


          )}

        </Modal >
      </ConfigProvider>

    </div>
  );
}




export default Checkid;
